<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userObj.account"> <br>
            密码：<input type="password" v-model="userObj.password"> <br>
            年龄：<input type="number" v-model.userObj.number="userObj.age"> <br>
            性别：男<input type="radio" v-model="userObj.sex" value="male">  女<input type="radio" v-model="userObj.sex" value="female"><br>
            爱好：学习<input type="checkbox" v-model="userObj.hobby" value="study">  打篮球<input type="checkbox" v-model="userObj.hobby" value="ball">
            打游戏<input type="checkbox" v-model="userObj.hobby" value="game">
            <br>
            所属校区：
            <select v-model="userObj.city">
                <option value="">请选择校区</option>
                <option value="beihai">北海</option>
                <option value="guilin">桂林</option>
            </select>
            <br>
            <textarea  cols="30" rows="10" v-model.lazy="userObj.other"></textarea> <br>
            <input type="checkbox" v-model="userObj.agree">阅读并接受<a href="https://cn.vuejs.org/guide/essentials/forms.html#lazy">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        const {ref,reactive} =Vue
        const app = Vue.createApp({
            setup(props) {
                // const account =ref('');
                // const password = ref('');
                // const age =ref(18);
                // const sex = ref('');
                // const hobby = ref([]);
                // const city = ref('');
                // const other = ref('');
                // const agree = ref('')
                const userObj= reactive({
                    account:'',
                    password:'',
                    age:18,
                    sex:'male',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:'',
                })
                function demo(params) {
                    console.log(JSON.stringify(userObj));
                }

                return {
                    userObj,demo
                }
            }
        }).mount("#app");
    </script>
</body>

</html>